import Fullscreen from './controllers/fullscreen'
import Video from './controllers/video'
import Caption from './controllers/caption'
import Progress from './controllers/progress'
import Controls from './controllers/controls'
import Volume from './controllers/volume'
import Playlist from './controllers/playlist'
import Hotkeys from './controllers/hotkeys'
import Resize from './controllers/resize'
import Stretch from './controllers/stretch'
import Logo from './controllers/logo'
import Focus from './controllers/focus'
import * as Icons from '../utils/icons'
import Bezel from './controllers/bezel'

export default initDom

function initDom () {
  // const skinname = this._config.skin.name
  const baseClass = this._baseClass
  const domString = getDomString({
    baseClass,
    config: this._config
  })

  this._container.innerHTML = domString
  this._container.classList.add(`${baseClass}`)

  this.dom.container = this._container
  this.dom.aspect = this._container.querySelector(`.${baseClass}-aspect`)
  this.dom.fullscreen = this._container.querySelector(
    `.${baseClass}-fullscreen-icon`
  )
  this.dom.caption = this._container.querySelector(
    `.${baseClass}-caption-icon`
  )
  this.dom.video = this._container.querySelector('video')
  this.dom.videoWrap = this._container.querySelector(
    `.${baseClass}-video-wrap`
  )
  this.dom.controller = this._container.querySelector(
    `.${baseClass}-controller`
  )
  this.dom.controllerMask = this._container.querySelector(
    `.${baseClass}-controller-mask`
  )
  this.dom.leftPlayBtn = this._container.querySelector(
    `.${baseClass}-icons-left .${baseClass}-play-icon`
  )
  this.dom.volumeWrap = this._container.querySelector(`.${baseClass}-volume`)
  this.dom.volumeButton = this._container.querySelector(
    `.${baseClass}-volume .${baseClass}-volume-icon`
  )
  this.dom.volumeIcon = this._container.querySelector(
    `.${baseClass}-volume-icon .${baseClass}-icon-content`
  )
  this.dom.volumeBar = this._container.querySelector(
    `.${baseClass}-volume-bar-inner`
  )
  this.dom.volumeBarWrap = this._container.querySelector(
    `.${baseClass}-volume-bar`
  )
  this.dom.volumeBarWrapWrap = this._container.querySelector(
    `.${baseClass}-volume-bar-wrap`
  )
  this.dom.playedBar = this._container.querySelector(`.${baseClass}-played`)
  this.dom.loadedBar = this._container.querySelector(`.${baseClass}-loaded`)
  this.dom.playedBarWrap = this._container.querySelector(
    `.${baseClass}-bar-wrap`
  )
  this.dom.playedBarTime = this._container.querySelector(
    `.${baseClass}-bar-time`
  )
  this.dom.ptime = this._container.querySelector(`.${baseClass}-ptime`)
  this.dom.dtime = this._container.querySelector(`.${baseClass}-dtime`)
  this.dom.logo = this._container.querySelector(`.${baseClass}-logo`)
  this.dom.bezel = this._container.querySelector(`.${baseClass}-bezel-icon`)

  this.controller.fullscreen = new Fullscreen(this)
  this.controller.video = new Video(this)
  this.controller.caption = new Caption(this)
  this.controller.progress = new Progress(this)
  this.controller.controls = new Controls(this)
  this.controller.volume = new Volume(this)
  this.controller.playlist = new Playlist(this)
  this.controller.hotkeys = new Hotkeys(this)
  this.controller.resize = new Resize(this)
  this.controller.stretch = new Stretch(this)
  this.controller.logo = new Logo(this)
  this.controller.focus = new Focus(this)
  this.controller.bezel = new Bezel(this)
}

function getDomString ({baseClass, config}) {
  const {preload} = config
  const vpreload = `preload="${preload}"`
  /* prettier-ignore */
  const dom =
    `<div class="${baseClass}-aspect"></div>` +
    `<div class="${baseClass}-mask"></div>` +
    `<div class="${baseClass}-video-wrap">` +
      `<video class="${baseClass}-video" ${vpreload}></video>` +
      `<div class="${baseClass}-logo"></div>` +
      `<div class="${baseClass}-danmaku"></div>` +
      `<div class="${baseClass}-subtitle"></div>` +
      `<div class="${baseClass}-bezel">` +
        `<span class="${baseClass}-bezel-icon"></span>` +
        `<span class="${baseClass}-loading-icon">${Icons.loading}</span>` +
      `</div>` +
    `</div>` +
    `<div class="${baseClass}-controller-mask"></div>` +
    `<div class="${baseClass}-controller">` +
      // icons left
      `<div class="${baseClass}-icons ${baseClass}-icons-left">` +
        // `<button class="${baseClass}-icon ${baseClass}-prev-icon"><-</button>` +
        `<button class="${baseClass}-icon ${baseClass}-play-icon">` +
          `<span class="${baseClass}-icon-content"></span>` +
        `</button>` +
        // `<button class="${baseClass}-icon ${baseClass}-next-icon">-></button>` +
        `<div class="${baseClass}-volume">` +
          `<button class="${baseClass}-icon ${baseClass}-volume-icon">` +
            `<span class="${baseClass}-icon-content"></span>` +
          `</button>` +
          `<div class="${baseClass}-volume-bar-wrap">` +
            `<div class="${baseClass}-volume-bar">` +
              `<div class="${baseClass}-volume-bar-inner">` +
                `<span class="${baseClass}-thumb" style="background: #b7daff;"></span>` +
              `</div>` +
            `</div>` +
          `</div>` +
        `</div>` +
        `<span class="${baseClass}-time">` +
          `<span class="${baseClass}-ptime"></span>` +
            ` / ` +
          `<span class="${baseClass}-dtime"></span>` +
        `</span>` +
      // TODO live
      `</div>` +

      // icons right
      `<div class="${baseClass}-icons ${baseClass}-icons-right">` +
        `<button class="${baseClass}-icon ${baseClass}-caption-icon"></button>` +
        `<button class="${baseClass}-icon ${baseClass}-fullscreen-icon"></button>` +
      `</div>` +
      `<div class="${baseClass}-bar-wrap">` +
        `<div class="${baseClass}-bar-time"></div>` +
        `<div class="${baseClass}-bar-preview"></div>` +
        `<div class="${baseClass}-bar">` +
          `<div class="${baseClass}-loaded"></div>` +
          `<div class="${baseClass}-played" style="background: rgb(183, 218, 255);">` +
            `<span class="${baseClass}-thumb" style="background: #b7daff;"></span>` +
          `</div>` +
        `</div>` +
      `</div>` +
    `</div>`
  return dom
}
